<!--通讯录 -->
<template>
	<div class="contact flex" id="addressbook">
		<div class="information">
			<div class="topfixed">
				<div class="infosearch marginAuto">
					<el-input class="infosearch-input" @change="searchfun" v-model="searchtxt" prefix-icon="el-icon-search"
						placeholder="搜索"></el-input>
				</div>
			</div>
			
			<div class="infoblock">
				<div class="infoeach curpoin flex" v-for="(item,index) in infodata" :key="index"
					@click="infosefun(item,index)" :class="infodataac == index ? 'activeinfoeach':''">
					<div class="infoeachl">
						 <!-- <el-image class="infoeachl-p" src="@/assets/goods.png" fit="fill" /> -->
						 <img class="infoeachl-p" src="@/assets/goods.png" alt="" />
					</div>
					<div class="infoeachr">
						<p class="infoeachr-name ellipsis01">{{ item.name }}</p>
					</div>
					<div class="infoeachtime" v-if="infodataac == index">
						<span class="el-icon-arrow-right" style="position: absolute;top:13px;font-size:16px;"></span>
					</div>
				</div>
			</div>
		</div>
		<div class="rblock">
			<div class="ointrtitle">{{ infoacgs }}</div>
			<div class="depart flex">
				<div class="departl">
					<div class="departlitem">
						<div class="departlitem-mc flex curpoin" :class="bookshow == 0 ? 'mainbg':''" @click="bookshowfun(0,'sale_leader',departldata.sale_leader_list)">
							<span class="departlitem-mcicon" :class="bookshow == 0 ? 'baiColor el-icon-caret-bottom':'el-icon-caret-right'"></span>
							<img class="departlitem-mcb" v-if="bookshow == 0" src="@/assets/fun/wjjactive.png" alt="文件夹图标" />
							<img class="departlitem-mcb" v-if="bookshow != 0" src="@/assets/fun/wjj.png" alt="文件夹图标" />
							<span class="departlitem-mctitle" :class="bookshow == 0 ? 'baiColor':''">销售部门</span>
						</div>
						<div class="departlitem-yg curpoin"
						v-if="bookshow == 0"
						v-for="(item,index) in departldata.sale_leader_list" :key="index" @click="eyfun('sale_leader',item)">
							<div class="departlitem-ygeach flex" :class="sale_leader == item.user_id ? 'departlitem-ygeachac':''">
								<img class="departlitem-ygeachimg" v-if="sale_leader != item.user_id" src="@/assets/fun/wey.png" alt="人员图标" />
								<img class="departlitem-ygeachimg" v-if="sale_leader == item.user_id" src="@/assets/fun/weyactive.png" alt="人员图标" />
								<p class="departlitem-ygeachname ellipsis01">{{ item.realname }}</p>
							</div>
						</div>
					</div>
					<div class="departlitem">
						<div class="departlitem-mc flex curpoin" :class="bookshow == 1 ? 'mainbg':''" @click="bookshowfun(1,'service_leader',departldata.service_leader_list)">
							<span class="departlitem-mcicon" :class="bookshow == 1 ? 'baiColor el-icon-caret-bottom':'el-icon-caret-right'"></span>
							<img class="departlitem-mcb" v-if="bookshow == 1" src="@/assets/fun/wjjactive.png" alt="文件夹图标" />
							<img class="departlitem-mcb" v-if="bookshow != 1" src="@/assets/fun/wjj.png" alt="文件夹图标" />
							<span class="departlitem-mctitle" :class="bookshow == 1 ? 'baiColor':''">售后部门</span>
						</div>
						
						<div class="departlitem-yg curpoin"
						v-if="bookshow == 1"
						v-for="(item,index) in departldata.service_leader_list" :key="index" @click="eyfun('service_leader',item)">
							<div class="departlitem-ygeach flex" :class="service_leader == item.user_id ? 'departlitem-ygeachac':''">
								<img class="departlitem-ygeachimg" v-if="service_leader != item.user_id" src="@/assets/fun/wey.png" alt="人员图标" />
								<img class="departlitem-ygeachimg" v-if="service_leader == item.user_id" src="@/assets/fun/weyactive.png" alt="人员图标" />
								<p class="departlitem-ygeachname ellipsis01">{{ item.realname }}</p>
							</div>
						</div>
					</div>
					<div class="departlitem">
						<div class="departlitem-mc flex curpoin" :class="bookshow == 2 ? 'mainbg':''" @click="bookshowfun(2,'sale',departldata.sale_list)">
							<span class="departlitem-mcicon" :class="bookshow == 2 ? 'baiColor el-icon-caret-bottom':'el-icon-caret-right'"></span>
							<img class="departlitem-mcb" v-if="bookshow == 2" src="@/assets/fun/wjjactive.png" alt="文件夹图标" />
							<img class="departlitem-mcb" v-if="bookshow != 2" src="@/assets/fun/wjj.png" alt="文件夹图标" />
							<span class="departlitem-mctitle" :class="bookshow == 2 ? 'baiColor':''">销售</span>
						</div>
						
						<div class="departlitem-yg curpoin"
						v-if="bookshow == 2"
						v-for="(item,index) in departldata.sale_list" :key="index" @click="eyfun('sale',item)">
							<div class="departlitem-ygeach flex" :class="sale == item.user_id ? 'departlitem-ygeachac':''">
								<img class="departlitem-ygeachimg" v-if="sale != item.user_id" src="@/assets/fun/wey.png" alt="人员图标" />
								<img class="departlitem-ygeachimg" v-if="sale == item.user_id" src="@/assets/fun/weyactive.png" alt="人员图标" />
								<p class="departlitem-ygeachname ellipsis01">{{ item.realname }}</p>
							</div>
						</div>
					</div>
					<div class="departlitem" v-if="roleId != 5 && roleId != 7 && roleId != 8">
						<div class="departlitem-mc flex curpoin" :class="bookshow == 3 ? 'mainbg':''" @click="bookshowfun(3,'designer',departldata.designer_list)">
							<span class="departlitem-mcicon " :class="bookshow == 3 ? 'baiColor el-icon-caret-bottom':'el-icon-caret-right'"></span>
							<img class="departlitem-mcb" v-if="bookshow == 3" src="@/assets/fun/wjjactive.png" alt="文件夹图标" />
							<img class="departlitem-mcb" v-if="bookshow != 3" src="@/assets/fun/wjj.png" alt="文件夹图标" />
							<span class="departlitem-mctitle" :class="bookshow == 3 ? 'baiColor':''">设计师</span>
						</div>
						
						<div class="departlitem-yg curpoin" 
						v-if="bookshow == 3"
						v-for="(item,index) in departldata.designer_list" :key="index" @click="eyfun('designer',item)">
							<div class="departlitem-ygeach flex" :class="designer == item.user_id ? 'departlitem-ygeachac':''">
								<img class="departlitem-ygeachimg" v-if="designer != item.user_id" src="@/assets/fun/wey.png" alt="人员图标" />
								<img class="departlitem-ygeachimg" v-if="designer == item.user_id" src="@/assets/fun/weyactive.png" alt="人员图标" />
								<p class="departlitem-ygeachname ellipsis01">{{ item.realname }}</p>
							</div>
						</div>
					</div>
					<div class="departlitem" v-if="roleId != 5 && roleId != 7 && roleId != 8">
						<div class="departlitem-mc flex curpoin" :class="bookshow == 4 ? 'mainbg':''" @click="bookshowfun(4,'customer',departldata.customer_list)">
							<span class="departlitem-mcicon" :class="bookshow == 4 ? 'baiColor el-icon-caret-bottom':'el-icon-caret-right'"></span>
							<img class="departlitem-mcb" v-if="bookshow == 4" src="@/assets/fun/wjjactive.png" alt="文件夹图标" />
							<img class="departlitem-mcb" v-if="bookshow != 4" src="@/assets/fun/wjj.png" alt="文件夹图标" />
							<span class="departlitem-mctitle" :class="bookshow == 4 ? 'baiColor':''">客户</span>
						</div>
						
						<div class="departlitem-yg curpoin"
						v-if="bookshow == 4"
						v-for="(item,index) in departldata.customer_list" :key="index" @click="eyfun('customer',item)">
							<div class="departlitem-ygeach flex" :class="customer == item.user_id ? 'departlitem-ygeachac':''">
								<img class="departlitem-ygeachimg" v-if="customer != item.user_id" src="@/assets/fun/wey.png" alt="人员图标" />
								<img class="departlitem-ygeachimg" v-if="customer == item.user_id" src="@/assets/fun/weyactive.png" alt="人员图标" />
								<p class="departlitem-ygeachname ellipsis01">{{ item.realname }}</p>
							</div>
						</div>
					</div>
				</div>
				<div class="departmsg" v-if="departacitem.user_id">
					<div class="departmsgt flex">
						<div class="departmsgt-head">
							<el-image class="departmsgt-headp" :src="apifun.URLimg+departacitem.avatar" fit="cover">
								<div slot="error" class="image-slot">
								    <img class="departmsgt-headp" src="@/assets/logosvg.png" alt="头像" /> -->
								</div>
							</el-image>
						</div>
						<div class="departmsgt-msg">
							<div class="departmsgt-msgname ellipsis01">{{ departacitem.realname || departacitem.role_name }}</div>
							<div class="departmsgt-msgposi mainColor">{{ departacitem.role_name }}</div>
						</div>
					</div>
					<div class="departmsgb">
						<div class="departmsgb-bm" v-if="departacitem.role_id != 5">部门：{{ departacitem.department_name }}</div>
						<div class="departmsgb-btn flex">
							<el-button class="departmsgb-btneach" @click="voicefun()">语音通话</el-button>
							<el-button class="departmsgb-btneach mainbg" @click="sendmsgfun()" style="color:#fff;border:none;">发信息</el-button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import tabnav from '@/components/tabnav';
	export default {
		components:{
			tabnav
		},
		data(){
			return {
				roleId:'',
				searchtxt: '',
				infodata: [{"name":'豫图网企业'}],  // 企业
				infodataac: 0,
				infoacgs:'豫图网企业',
				departldata:{},  // 好友
				bookshow:0,
				sale_leader:"",
				service_leader:"",
				sale:"",
				designer:"",
				customer:"",
				departacitem:{},
			}
		},
		mounted(){
			this.roleId = this.$store.state.roleId;
			this.getDepartmentList()
		},
		methods:{
			voicefun(){  // 语音通话
				this.$emit('bookSendMsg',this.departacitem)
			},
			sendmsgfun(){  // 发消息
				this.$emit('bookSendMsg',this.departacitem)
			},
			searchfun() { // 搜索
				console.log('只有一个企业方法废弃',this.searchtxt)
			},
			getDepartmentList(){  // 获取部门好友列表
				this.apifun.$post('/pc/im/getDepartmentList',{}).then((res)=>{
					// console.log(res)
					if(res.code ==  200){
						let datas = res.data;
						this.departldata = datas;
						// this.sale_leader = datas.sale_leader_list[0].user_id;
					}
				})
			},
			bookshowfun(type,vari,data){ // 选择部门
				this.bookshow = type;
				this[vari] = '';
				this.departacitem = {};
				// if(data.length > 0){
				// 	this[vari] = data[0].user_id
				// }
			},
			eyfun(vari,item){  // 点击人员
				this[vari] = item.user_id;
				this.departacitem = item;
			},
			infosefun(item,index) {  // 点击企业item
				this.infodataac = index;
				this.infoacgs = item.name;
			},
		}
	}
</script>
<style>
	#addressbook .infosearch-input .el-input__inner{
		background-color: #FFF6F1;
		height:36px;
		line-height: 36px;
	}
	#addressbook .infosearch-input .el-input__inner:focus{
		border-color:#FF5E03;
	}
</style>
<style scoped lang="scss">
	.information {
		position: relative;
		width: 180px;
		padding: 0 10px;
		height: 98vh;
		overflow-y: auto;
		border-right: 1px solid #EBEBEB;
	}
	.topfixed{
		position:sticky;
		z-index: 100;
		top: 0;
		left: 0;
		width:200px;
		background-color: #fff;
	}
	// 搜索
	.infosearch {
		position: fixed;
		top: 0;
		z-index: 100;
		width: 180px;
		height:44px;
		background-color: #fff;
	
		.infosearch-input {
			width: 180px;
			height: 38px;
			border: none;
			margin-top: 5px;
		}
	}
	
	// 消息列表
	.infoblock {
		padding-top: 40px;
		margin-top: 20px;
	
		.infoeach {
			width: 170px;
			padding: 5px;
			margin-bottom: 20px;
			border-radius: 10px;
	
			.infoeachl {
				position: relative;
				width: 39px;
				height: 39px;
	
				.infoeachl-p {
					width: 39px;
					height: 39px;
					border-radius: 5px;
				}
	
				.infoeachl-num {
					position: absolute;
					right: -2px;
					bottom: -2px;
					width: 12px;
					height: 12px;
					line-height: 12px;
					text-align: center;
					color: #fff;
					font-size: 10px;
					border-radius: 50%;
					border: 3px solid #fff;
				}
			}
	
			.infoeachr {
				width:100px;
				margin-left: 10px;
	
				.infoeachr-name {
					line-height:40px;
					font-size: 14px;
					color: #333333;
				}
	
				.infoeachr-msg {
					line-height: 20px;
					font-size: 12px;
					color: var(--mainColor);
				}
			}
	
			.infoeachtime {
				position: relative;
				color: #fff;
				font-size: 12px;
				line-height:40px;
			}
		}
	
		.activeinfoeach {
			background-color: var(--mainColor);
	
			.infoeachr {
				.infoeachr-name {
					color: #fff;
				}
	
				.infoeachr-msg {
					color: #fff !important;
				}
			}
		}
	}
	// 右部指派详情信息
	.rblock{
		position: relative;
		flex: 1;
		z-index: 99;
		background-color:#F7F7F7;
	}
	.ointrtitle{
		width:96%;
		padding:0px 2% 10px;
		height:40px;
		line-height: 40px;
		border-bottom: 1px solid #EEEEEE;
		color:#333333;
		font-size:14px;
		font-weight: bold;
		background-color: #fff;
	}
	.depart{
		width:98%;
		margin:10px auto;
		min-height:612px;
		border-radius:10px;
		background-color: #fff;
	}
	// 部门列表
	.departl{
		width: 210px;
		height:90vh;
		overflow-y: auto;
		.departlitem{
			.departlitem-mc{
				position: relative;
				padding:15px 0 15px 10px;
				.departlitem-mcicon{
					font-size: 16px;
					color:#333;
				}
				.departlitem-mcb{
					width: 14px;
					height: 14px;
					margin:1px 8px;
				}
				.departlitem-mctitle{
					position:relative;
					top:-2px;
					font-size: 14px;
					color: #333333;
				}
				.baiColor{
					color: #ffffff;
				}
			}
			.departlitem-yg{
				.departlitem-ygeach{
					background-color: #fff;
					padding:15px 0 15px 60px;
					.departlitem-ygeachimg{
						width: 16px;
						height: 16px;
						margin-right:10px;
					}
					.departlitem-ygeachname{
						font-size: 14px;
						color:#999999;
						line-height:16px;
					}
				}
				.departlitem-ygeachac{
					background-color:var(--bgColor);
					.departlitem-ygeachname{
						color:var(--mainColor);
					}
				}
			}
		}
	}
	//部门人员信息
	.departmsg{
		width: 300px;
		height: 320px;
		margin:90px 0 0 40px;
		border-radius: 10px;
		background-color: var(--bgColor);
		.departmsgt{
			border-bottom: 2px solid #fff;
			padding:40px 0 20px;
			.departmsgt-head{
				width: 80px;
				height: 80px;
				line-height: 80px;
				border-radius: 10px;
				margin-left: 30px;
				.departmsgt-headp{
					width:80px;
					height:80px;
					border-radius:10px;
				}
			}
			.departmsgt-msg{
				margin-left:12px;
				.departmsgt-msgname{
					line-height: 40px;
					color: #333333;
					font-size: 20px;
					font-weight: bold;
					margin-top:5px;
				}
				.departmsgt-msgposi{
					display:inline-block;
					padding:0 10px;
					border-radius:5px;
					font-size: 14px;
					margin-top:5px;
					border: 1px solid var(--mainColor);
				}
			}
		}
		.departmsgb{
			.departmsgb-bm{
				margin-top:20px;
				font-size: 14px;
				color: #333333;
				line-height: 20px;
				margin-left: 30px;
			}
			.departmsgb-btn{
				width:80%;
				justify-content: space-between;
				margin:70px auto 0;
				.departmsgb-btneach{
					width: 112px;
					height: 40px;
					border-radius:8px;
					background-color: #fff;
					color: #999999;
					border: 1px solid #999999;
				}
			}
		}
	}
</style>